<!--  -->
<template>
<div class='cart'>
    <!-- icon-gouwuche -->
    <!-- icon-danxuan -->
    <!-- icon-danxuanxuanzhong -->
    <!-- 购物车为空的时候 -->
        <div class="no-shop" v-if="carEmpty">
            <i class="iconfont icon-gouwuche"></i>
            <div>您的购物车还是空空的，快去逛逛吧！</div>
            <router-link to="/home">去逛逛</router-link>
        </div>
        <!-- 购物车不为空商品列表 -->
      
        <div class="have-shop" v-for="(value,index) in carList" :key="value.ru_id" v-else>
            <div class="hanv-shop-list">
                <div class="car-left flex-base">
                    <!-- 未选中的 -->
                  <!-- 未选中的 -->
                    <div @click="shopSelect(value,index)">
                        <i class="iconfont icon-danxuan" v-if="!value.isShopSelect"></i>
                          <i class="iconfont icon-danxuanxuanzhong" v-else style="color:#ff534c"></i>
                    </div>


                    <!-- 选中的 -->
                    <!-- <i class="iconfont icon-danxuanxuanzhong"></i> -->
                    <div >{{value.rz_shopName}}</div>
                </div>
                
                     <div class="car-right flex-base" v-for="(item,index) in value.children" :key='item.goods_id'>
                    <div @click="goodSelect(item,index)">
                        <i class="iconfont icon-danxuan" v-if="!item.isSelect"></i>
                        <i class="iconfont icon-danxuanxuanzhong" v-else style="color:#ff534c"></i>
                    </div>
                    <div class="flex-base flex-son">
                        <div class="shop-img">
                            <img :src="item.goods_thumb" alt="">
                        </div>
                        <div class="flex-son">
                            <div class="shop-title">{{item.goods_name}}</div>
                            <div class="flex-sp">
                                <div>{{item.shop_price}}</div>
                                <div class="flex-base input-num">
                                    <a href="#" @click="addCarNum(value,index,1)">-</a>
                                    <input type="text" v-model="item.buyNum">
                                    <a href="#" @click="addCarNum(value,index,2) ">+</a>
                                    <i class="iconfont icon-jushoucang"></i>
                                    <i class="iconfont icon-shanchu1"  @click="deleteFun(item,index)"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <div class="car-footer flex-sp">
            <div class="car-footer-left flex-base" @click="selectAll">
                <i class="iconfont icon-danxuan" v-if="!isSelectAll"></i>
                <i class="iconfont icon-danxuanxuanzhong" v-else style="color:#ff534c"></i>
                <div>全选</div>
            </div>
            <div class="car-footer-right flex-base">
                <div class="car-footer-right-price">
                    <div>合计：￥ {{totalprice}} </div>
                    <div>(不含运费,已节省￥0.00)</div>
                </div>
                <div class="buy-btn">去结算（ {{totalNum}} ）</div>
            </div>

        </div>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
    // carList:[{
    //     // 店铺所需要的字段
    //     // 店铺id
    //     ru_id:'456',
    //     // 店铺名称
    //     rz_shopName:'好谷',
    //     // 是否选中  自定义字段
    //     isShopSelect:true,
    //     children:[
    //         {
    //             // 商品所需要的字段
    //         goods_id:'123',
    //         //商品id 
    //         // 商品名称
    //         goods_name:'测试',
    //         // 商品图片
    //         goods_thumb:'https://x.dscmall.cn/storage/images/202201/thumb_img/1278_copy_0_thumb_G_1642458923455.jpg',
    //         // 商品价格
    //         shop_price:'123',
    //         // 购买数量  自定义字段
    //         buyNum:1,
    //         // 是否选中  自定义字段
    //         isSelect:true,
    //         }
    //     ]
    // }]
};
},
//监听属性 类似于data概念
computed: {
    carList(){
        return this.$store.state.carListData
    },
    isSelectAll(){
        return this.$store.state.isSelectAll
    },
    //总价格
    totalprice(){
        let price = 0;
        let data = this.$store.state.carListData;
        data.map(item=>{
            item.children.map(item1=>{
                if(item1.isSelect){
                   price += item1.shop_price*1*item1.buyNum*1 
                }
            //    price += item1.shop_price*item.buyNum*1
            //这行错误
            })
        })
        return price 
    },
    //是否展示空购物车
    carEmpty(){
        if(this.$store.state.carListData.length>0){
            return false
        }else{
            return true
        }
    },
      //结算数量
    totalNum(){
        let price = 0;
        let data = this.$store.state.carListData;
        data.map(item=>{
            item.children.map(item1=>{
                if(item1.isSelect){
                    price += item1.buyNum*1
                }
               
            })
        })
        return price 
    },
},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
     // ++ --的方法
    addCarNum(carlist,index,flag){
         let data;
        if(flag==2){//++操作
          carlist.children[index].buyNum +=1;
          data ={
            carlist,
            index,
            flag:flag
         }
        }else{
            if(carlist.children[index].buyNum>1){
                 carlist.children[index].buyNum -=1;
            }else{
                carlist.children[index].buyNum =1;
            }
            data ={
            carlist,
            index,
            flag:flag
         }
        }
         this.$store.commit('addCarNum',data)
    },
    
    // 商品选择的方法
    goodSelect(item,index){
        item.isSelect =! item.isSelect
        let data={
            item,
            index
        }
        this.$store.commit('goodSelect',data)
    },
    shopSelect(item,index){
         item.isShopSelect =! item.isShopSelect
        let data={
            item,
            index
        }
        this.$store.commit('shopSelect',data)
    },
    selectAll(){
        this.$store.commit('selectAll')
    },
    deleteFun(data1,index){
        let data ={
            data1,
            index
        }
        this.$store.commit('deleteFun',data)
    }
},
beforeCreate() {}, //生命周期 - 创建之前
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
beforeMount() {}, //生命周期 - 挂载之前
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
.cart{
    .no-shop{
        position: absolute;
        width: calc(100% - 2rem);
        height: 25rem;
        left: 1rem;
        top: 1rem;
        background: #fff;
        border-radius: 2rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        i{
            font-size:15rem;
        }
        div{
            margin:1.5rem 0;
        }
    }

    .have-shop{
        width: calc(100% - 2rem);
        margin: 1rem;
        background: #fff;
        border-radius: 2rem;
        padding:2rem 1rem;
        box-sizing: border-box;
        .hanv-shop-list{
           
       
        .car-right{
            .shop-img{
                img{
                    width:7rem;
                    height:7rem
                }
            }
            .shop-title{
                 overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }
            .input-num{
                a{
                    display: block;
                    width: 2rem;
                    height: 2rem;
                    text-align: center;
                    line-height: 2rem;
                    background: #f2f3f5;
                }
                input{
                    width: 2.5rem;
                    height: 2rem;
                    line-height: 2rem;
                    border: 1px solid #eee;
                    text-align: center;
                }
                i{
                    margin:0 0.5rem
                }
            }
        }
        }
    }
    .car-footer{
        position: fixed;
        width:100%;
        height: 4.4rem;
        bottom: 4.9rem;
        left: 0;
        background: #fff;
        .car-footer-left{
            margin-left:1rem
        }
    .car-footer-right{
        .car-footer-right-price{
            text-align: right;
            margin-right: 0.5rem;
        }
        .buy-btn{
            height:4.4rem;
            background: #ff534c;
            color:#fff;
            text-align: center;
            line-height: 4.4rem;
            padding:0rem 2rem;
            box-sizing: border-box;
        }
    }
    }
}

</style>